<template>
  <div class="sort-checkbox">
    <div class="header">
      {{ title }}
    </div>
    <div class="search">
      <el-input placeholder="搜索" v-model.trim="filterText" clearable>
        <template #prefix>
          <i class="MC_iconfont MC_icon-sousuo"></i>
        </template>
      </el-input>
    </div>
    <vue-draggable-next v-model="DataList" :handle="'.MC_iconfont'" @end="dragEnd" class="draggable-box">
      <div
        v-for="(item, index) in DataList"
        :key="index"
        v-show="item.label && item.label.indexOf(filterText) > -1 && item.prop !== 'oprate'"
        class="list"
      >
        <span class="MC_iconfont MC_icon-tuodong-shu"></span>
        <el-checkbox
          v-model="item.show"
          @change="checkChange(item)"
          :disabled="(item.show && checkBoxDisable) || item.disabled"
        >
          {{ item.label }}
        </el-checkbox>
      </div>
    </vue-draggable-next>
  </div>
</template>

<script lang="ts">
import { deepClone } from '../../../utils/common'
import { VueDraggableNext } from 'vue-draggable-next'
import { computed, defineComponent, reactive, watch, onMounted, toRefs } from 'vue'
export default defineComponent({
  name: 'SearchCheckbox',
  components: { VueDraggableNext },
  props: {
    headerData: {
      // 表头数据
      type: Array,
      default: () => []
    },
    title: {
      // 标题
      type: String,
      default: '自定义排序'
    }
  },
  emits: ['onCheckChange'],
  setup(props, { emit }) {
    const state = reactive({
      DataList: [] as any[], // header list
      filterText: '' // 过滤值
    })

    watch(
      () => props.headerData,
      () => {
        initChecked()
      },
      { deep: true }
    )

    const checkBoxDisable: any = computed(() => {
      // 只剩一个checkbox禁止取消
      let num = 0
      state.DataList.forEach((item) => {
        if (item.show && item.prop !== 'oprate') {
          num++
        }
      })
      return num === 1
    })

    const checkChange = (data: any) => {
      // check-box状态变化
      emit('onCheckChange', state.DataList, null, data)
    }

    const initChecked = () => {
      const DataList = deepClone(props.headerData)
      state.DataList = DataList
      emit('onCheckChange', DataList, true)
    }

    const dragEnd = () => {
      // 拖拽结束
      emit('onCheckChange', state.DataList, null)
    }

    onMounted(() => {
      initChecked()
    })

    return {
      checkChange,
      dragEnd,
      checkBoxDisable,
      ...toRefs(state)
    }
  }
})
</script>

<style lang="stylus" scoped>
.draggable-box
  max-height 250px
  overflow-y scroll
.sort-checkbox
  width 200px
  font-size 14px
  .header
    padding 16px
    font-weight 500
    color rgba(0, 0, 0, 0.88)
    box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.05)
  .search
    padding 12px 16px
    :deep(.el-input__wrapper)
      border 1px solid transparent
      background var(--mc-gray2-color)
      border-radius 18px
      box-shadow none
  .list
    color rgba(0, 0, 0, 0.88)
    display flex
    align-items center
    padding 6px 16px
  :deep(.el-checkbox__input).is-checked + .el-checkbox__label
    color rgba(0, 0, 0, 0.66)
  :deep(.el-checkbox__label)
    font-size 14px
  .MC_iconfont
    cursor move
    color rgba(0, 0, 0, 0.38)
    margin-right 10px
</style>
